<template>
	<view>
		<image class="topimg" src="../../static/getreturn.jpg" mode="aspectFill"></image>

		<view class="uplodabox">
			<view class="u-font-bold u-font-28" style="color: red;"> 
				*orc传图识字此功能仅支持菜鸟快递图片（其他快递请手动录入快递信息，记得手动选择规格）
			</view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" width="320" height="150" @delete="deletePic" name="1"
				multiple :maxCount="1">
				<image src="/static/uploadimg.jpg" mode="aspectFit" style="width: 686rpx;"></image>
			</u-upload>
		</view>

		<view class="main-box-style" style="background-color: #fff; margin: 10rpx auto;"
			v-for="(item,index) in orderlist">
			<view class="flex" style="justify-content: space-between;">
				<text class="u-font-bold">快递信息</text>
				<u-icon @click="mydelete(index)" name='close'></u-icon>
			</view>
			<view class="inputbox u-m-t-40">
				<view class="flex">
					<text>驿站名字：</text>
					<input type="text" placeholder="请输入驿站名字" v-model="item.yztitle" />
				</view>
				<u-line margin='20rpx auto'></u-line>
			</view>
			<view class="inputbox u-m-t-20">
				<view class="flex">
					<text>取件号码：</text>
					<input type="text" placeholder="请输入取件号码" style="ime-mode:disabled" @input="pickupcodeinput($event,index)"
						v-model="item.pickupcode" />
				</view>
				<u-line margin='20rpx auto'></u-line>
			</view>
			<view class="inputbox u-m-t-20">
				<view class="flex">
					<text>快递单号：</text>
					<input type="text" placeholder="请输入快递单号" style="ime-mode:disabled"
						@input="tracknumberinput($event,index)" v-model="item.tracknumber" />
				</view>
				<u-line margin='20rpx auto 0'></u-line>
			</view>
			<view class="myinputbox ">
				
					<text style="flex-shrink: 0;">快递规格：</text>
					<uni-section title="" type="">
						<uni-data-select v-model="item.type" :localdata="range" @change="change"></uni-data-select>
					</uni-section>
				
			</view>
			<view class="inputbox u-m-t-40">
				<input type="text" placeholder="备注" v-model="item.remark" />
				<u-line margin='20rpx auto 0'></u-line>
			</view>
		</view>
		<view class="" style="width: 100%; height: 300px;">

		</view>
		<view class="estimate">
		<!-- 	<view class="u-font-28">
				代取包裹的名字和电话需一致；
			</view>
			<view class="u-font-28">
				每天上午的订单14点至16点派送，下午的是19点到21点；<text style="color: red;" >（恶劣天气延迟派送）</text>；截单时间为18点
			</view> -->
			<view class="estimatebox u-m-t-20">
				<view class="estimate_left">
					<view class="">
						<text>预估总价</text>
						<text style="color: red;">￥{{allprice}}({{allprice}}金币)</text>
					</view>
					<text class="grey main-text u-m-t-10">{{choosespecification}}</text>
				</view>
				<view class="makesure" @click="showpop">
					<text>确认下单</text>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" bgColor='#f4f4f4' round=20 :closeOnClickOverlay='true' @open="open">
			<orderpop @showclick='showclick' @closeorder='closeorder' :allprice='allprice' :orderlist='orderlist'
				:ordertype='0'></orderpop>
		</u-popup>
		<u-popup :show="childrenshow" @close="childrenclose" round=10 :closeOnClickOverlay='true' @open="childrenopen">
			<infopop @cancelclick='cancelclick' @confirmclick='confirmclick'>
			</infopop>
		</u-popup>
		<view class="plus" @click="addlist">
			<u-icon size=38 color='#315ee6' name='plus-circle'></u-icon>
		</view>
	</view>
</template>

<script>
	import infopop from '../../components/infopop.vue';
	import orderpop from '../../components/orderpop.vue';
	export default {
		components: {
			infopop,
			orderpop
		},
		data() {
			return {
				orderlist: [{
					yztitle: '',
					pickupcode: '',
					tracknumber: '',
					type: 0,
					remark: ''
				}],
				fileList1: [],
				childrenshow: false,

				choosespecification: '',
				allprice: 0.00,
				show: false,
				range: [{
						value: "大件",
						text: "大件"
					},
					{
						value: "中件",
						text: "中件"
					},
					{
						value: "小件",
						text: "小件"
					},
					{
						value: "超大件",
						text: "超大件"
					},
				]
			};
		},

		methods: {
			//获取价格
			getmoney() {
				this.$api.post('/Delivery/getPickuppackmoney', {
					bejsarr: this.orderlist,
					op: 1
				}).then(res => {
					this.allprice = res.data
				})
			},
			change(e) {
				console.log(e)
				this.getmoney()
				this.range.map(item => {
					if (e == item.value) {
						// this.choosespecification = item.text;
					}
				})
			},
			tracknumberinput(e, index) {
				if (/[\u4E00-\u9FA5]/g.test(e.detail.value)) {
					this.orderlist[index].tracknumber = e.detail.value.replace(/[\u4E00-\u9FA5]/g,
						''); // 若含有汉字，则将汉字替换为''       
					return this.$toast("不能输入汉字！！");
				}
			},
			pickupcodeinput(e, index) {

				if (/[\u4E00-\u9FA5]/g.test(e.detail.value)) {
					this.orderlist[index].pickupcode = e.detail.value.replace(/[\u4E00-\u9FA5]/g,
						''); // 若含有汉字，则将汉字替换为''       
					return this.$toast("不能输入汉字！！");
				}
			},
			closeorder(e) {
				this.show = e
			},
			addlist() {
				this.orderlist.unshift({
					yztitle: '',
					pickupcode: '',
					tracknumber: '',
					type: 0,
					remark: ''
				})
				this.$toast('添加成功~')
			},
			mydelete(index) {
				if (this.orderlist.length == 1) {
					this.$toast('至少填写一个快递信息~')
				} else {
					this.orderlist.splice(index, 1)
				}
			},
			close() {
				this.show = false
			},
			open() {

			},
			childrenclose() {
				this.childrenshow = false
			},
			childrenopen() {

			},

			//组件传来的值
			showclick(e) {
				this.childrenshow = e
			},
			cancelclick(e) {
				this.childrenshow = e
			},
			confirmclick(e) {
				this.childrenshow = e
			},
			showpop() {

				this.orderlist.map((item, index) => {
					if (!item.type) {
						this.$toast(`请选择第${index+1}个的包裹规格~`)
					}
					if (!item.yztitle) {
						this.$toast(`请输入第${index+1}个的包裹驿站名字~`)
					}
					if (!item.pickupcode) {
						this.$toast(`请输入第${index+1}个的包裹取件码~`)
					}
					if (!item.tracknumber) {
						this.$toast(`请输入第${index+1}个的包裹单号~`)
					}
				})

				let flag = this.orderlist.every(item => item.type != '');
				let flag1 = this.orderlist.every(item => item.yztitle != '');
				let flag2 = this.orderlist.every(item => item.pickupcode != '');
				let flag3 = this.orderlist.every(item => item.tracknumber != '');

				if (flag && flag1 && flag2 && flag3) {
					this.show = true
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let newres = JSON.parse(res.data)

							this.ocr(newres.data.fullurl)
							setTimeout(() => {
								resolve(res.data.data, 'zxczxc')
							}, 1000)
						}
					});
				})
			},
			//识别快递单
			ocr(deliimg) {
				this.$api.post('/Delivery/ocrPickupcle', {
					deliimg
				}).then(res => {
					if(res.data!=''){
						this.orderlist = res.data
						this.orderlist.map(item => {
							return item.type = ''
						})
					}else{
						this.$toast('暂未识别到相应信息~')
					}
					
				}).catch(res => {

				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(244, 244, 244);
	}

	.topimg {
		width: 100vw;
		height: 250rpx;
	}

	.uplodabox {
		width: 686rpx;
		margin: 30rpx auto;
	}

	.inputbox {
		display: flex;
		flex-direction: column;

		// .input-placeholder {
		// 	color: #000 !important;
		// }
	}

	.myinputbox {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		
		::v-deep .uni-section {
			width: 470rpx;
			flex: 1;
			// margin-left: 20rpx;
		}
	
		::v-deep .uni-section .uni-section-header {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 12px 10px;
			font-weight: normal;
			display: none;
		}
	}

	.estimate {
		background-color: #fff;
		bottom: 0;
		position: fixed;
		padding: 40rpx;
		width: 100%;
		z-index: 99;
		box-sizing: border-box;
		.estimatebox{
			justify-content: space-between;
			align-items: center;
			display: flex;
		}
		.estimate_left {
			display: flex;
			flex-direction: column;
		}

		.makesure {
			background-color: rgb(50, 94, 230);
			padding: 16rpx 30rpx;
			border-radius: 30rpx;
			color: #fff;
		}

		.nomakesure {
			background-color: rgb(198, 198, 198);
			padding: 16rpx 30rpx;
			border-radius: 30rpx;
			color: #fff;
		}
	}

	.plus {
		position: fixed;
		right: 50rpx;
		top: 80%;
		z-index: 99;
	}
</style>